<template>
  <div class="jmcbox">
    <!-- 页面刷新容器 -->
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <!-- 一行 -->
      <van-row>
        <van-col span="5">
          <!-- 头像 -->
          <van-image
            class="pic"
            round
            width="4rem"
            height="4rem"
            :src="require('../../assets/崔路易（头像）.jpg')"
            @click="showPic"
          />
        </van-col>
        <van-col span="12" class="uname">
          <span>精神小伙~</span>
          <van-tag mark type="success" color="#f2826a">银牌</van-tag>
          <p>
            <van-tag plain type="success">小花信用89.1</van-tag>
            <van-tag plain type="danger">家庭号</van-tag>
          </p>
        </van-col>
        <van-col :span="4">
          <div class="right">
            <van-icon name="setting-o" />
            <van-icon name="chat-o" color="#07c160" dot  @click="$router.push('/my/message')" />
          </div>
        </van-col>
      </van-row>
      <div class="text">
        <div class="text-son">
          <span>9</span>
          <p>收藏</p>
        </div>|
        <div class="text-son">
          <span>17</span>
          <p>关注</p>
        </div>|
        <div class="text-son">
          <span>21</span>
          <p>浏览足迹</p>
        </div>|
        <div class="text-son" @click="$router.push('/my/subMoney')">
          <span>2</span>
          <p>优惠券</p>
        </div>
      </div>
      <van-divider/>
      <br>
      <!-- 订单与服务 -->
      <van-divider content-position="left">订单与服务</van-divider>
      <!-- 宫格 -->
      <van-grid :gutter="10">
        <van-grid-item icon="balance-list-o" text="订单管理"/>
        <van-grid-item icon="shop-o" text="菜来驿站"/>
        <van-grid-item icon="smile-o" text="客服小蜜" color="green"/>
        <van-grid-item icon="vip-card-o" text="Vip"/>
        <van-grid-item icon="comment-o" text="评价有礼"/>
        <van-grid-item icon="point-gift-o" text="超值礼物"/>
        <van-grid-item icon="hot-sale-o" text="热卖推荐" color="green"/>
        <van-grid-item icon="medal-o" text="角色勋章"/>
      </van-grid>
      <br>
      <van-divider :style="{ color: 'red', borderColor: '#eee', padding: '0 16px' }">精品推荐</van-divider>
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" indicator-color="red" :show-indicators="false">
        <van-swipe-item v-for="(item, index) in swiperList" :key="index">
          <img v-lazy="item.image_src" style="width:410px; height:230px">
        </van-swipe-item>
      </van-swipe>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数组
      swiperList: [
        //    'https://img.yzcdn.cn/vant/apple-1.jpg',
        // 'https://img.yzcdn.cn/vant/apple-2.jpg'
      ],
      // 下拉刷新
      isLoading: false,
      count: 0
    };
  },
  created() {
    // 获取轮播图数据
    this.getSwiper();
  },
  // mounted() {
  //   this.$toast.success("chegonggong");
  // },
  methods: {
    async getSwiper() {
      const res = await this.$http.get("/home/swiperdata");
      // console.log(res);
      if (res.meta.status == 200) {
        this.swiperList = res.message;
      }
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        // this.$toast.success("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    // 展示头像
    showPic() {
      this.ImagePreview({
        images: [require('../../assets/崔路易（头像）.jpg')],
        // 显示x号
        closeable: true,
        showIndex:false
      });
    }
  }
};
</script>

<style lang="less" scoped>
.jmcbox {
  // height: 800px;
  margin-top: 46px;
}
.pic {
  margin: 10px;
  border: 2px solid yellow;
}
.uname {
  margin: 20px 15px 10px 15px;
  font-size: 14px;
}
.van-tag {
  margin-left: 5px;
}

.van-icon {
  margin: 5px;
}
.right {
  position: absolute;
  top: 10px;
  right: 10px;
}
.text,
.mysellf {
  display: flex;
  align-items: center;
  .text-son {
    flex: 25%;
    text-align: center;
    span {
      margin: 0;
      padding: 0;
    }
    p {
      margin: 5px;
      font-size: 12px;
    }
  }
}
.my-son {
  flex: 20%;
  text-align: center;
  van-icon {
    margin: 0;
    padding: 0;
  }
  p {
    margin: 5px;
    font-size: 12px;
  }
}
.van-divider {
  margin: 0;
}
.van-swipe {
  margin-top: 5px;
  margin-bottom: 5px;
}
.van-pull-refresh {
  margin-top: 40px !important;
}
</style>